本來今天要介紹的是驗證授權,但官方那一套我不是很喜歡,所以就從網路上找其他的解決辦法,果不其然就找到了一套,依照Blazor WebAssembly - JWT Authentication Example & Tutorial的思路,簡單的做了一套 JWT 驗證流程,讓我們開始吧!
若要保留登入資料供下次使用,我們需要透過 localStorage
來達成,所以如果你的需求不是如此,便可以省略這一步。
我們先建立一個服務與其介面來處理 localStorage
相關方法:
// ILocalStorageService.cs
public interface ILocalStorageService
{
Task<T> GetItem<T>(string key);
Task SetItem<T>(string key, T value);
Task RemoveItem(string key);
}
// LocalStorageService.cs
public class LocalStorageService : ILocalStorageService
{
private readonly IJSRuntime _jsRuntime;
public LocalStorageService(IJSRuntime jsRuntime)
{
_jsRuntime = jsRuntime;
}
public async Task<T> GetItem<T>(string key)
{
var json = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", key);
if (json == null)
return default;
return JsonSerializer.Deserialize<T>(json);
}
public async Task SetItem<T>(string key, T value)
{
await _jsRuntime.InvokeVoidAsync("localStorage.setItem", key, JsonSerializer.Serialize(value));
}
public async Task RemoveItem(string key)
{
await _jsRuntime.InvokeVoidAsync("localStorage.removeItem", key);
}
}
因為 windows
物件本身就包含 localStorage
的處理,所以不需要特別撰寫 javascript
。
然後建立驗證服務:
// IAuthService.cs
public interface IAuthService
{
Task<bool> Check();
}
// AuthService.cs
public class AuthService : IAuthService
{
private readonly HttpClient _httpClient;
private readonly ILocalStorageService _localStorageService;
public AuthService(
HttpClient httpClient,
ILocalStorageService localStorageService
)
{
_httpClient = httpClient;
_localStorageService = localStorageService;
}
public async Task<bool> Check()
{
var request = new HttpRequestMessage(HttpMethod.Get, "/auth");
var token = await _localStorageService.GetItem<string>("token");
if (token is null)
{
return false;
}
request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token);
using var response = await _httpClient.SendAsync(request);
if (response.StatusCode == HttpStatusCode.Unauthorized)
{
return false;
}
return true;
}
}
執行此驗證方法,會從 localStorage
取得 token
並添加到 header
中然後透過 HTTP 方法 get
呼叫 /auth
的 api,若 localStorage
中找不到 token
或者 HTTP 回應的狀態碼為 401
則回傳 false
,反之為 true
。
但此時並沒有串接任何一個 API,所以需要建立一個假的 HttpClientHandler
來做測試,透過繼承 HttpClientHandler
,並覆寫其 SendAsync
方法:
// FakeHttpClientHandler.cs
public class FakeHttpClientHandler : HttpClientHandler
{
protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
{
if (request.RequestUri.AbsolutePath == "/auth" && request.Method == HttpMethod.Get)
{
return new HttpResponseMessage
{
StatusCode = HttpStatusCode.OK
};
}
else
{
return await base.SendAsync(request, cancellationToken);
}
}
}
這樣一來只要呼叫 HttpClient.SendAsync
時 HTTP 方法為 get
且位置為 /auth
,就會無條件返回成功。
最後記得將上面的服務註冊到 DI Container 如:
builder.Services.AddScoped(sp => new HttpClient(new FakeHttpClientHandler()) { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) })
.AddScoped<ILocalStorageService, LocalStorageService>()
.AddScoped<IAuthService, AuthService>();
基本的驗證流程就完成了,只要有元件呼叫 IAuthService.Check
方法,就會檢查 token
是否存在且有效。
這邊提供測試用的 Component:
@page "/day26sample"
@inject ILocalStorageService LocalStorageService;
<h3>Day26Sample</h3>
<button @onclick="SetUser">Set Token</button>
<button @onclick="RemoveUser">Remove Token</button>
<NavLink href="/day26authsample">Go Auth</NavLink>
@code {
}
@functions{
private async Task SetUser()
{
await LocalStorageService.SetItem<string>("token", @"blazor30days");
}
private async Task RemoveUser()
{
await LocalStorageService.RemoveItem("token");
}
}
@page "/day26authsample"
@inject IAuthService AuthService
@inject NavigationManager Navigation
<h3>Day26AuthSample</h3>
<NavLink href="/day26sample">Go Back</NavLink>
@code {
protected override async Task OnInitializedAsync()
{
if (!await AuthService.Check())
{
Navigation.NavigateTo("/day26sample");
}
await base.OnInitializedAsync();
}
}
可以試試看沒有設定 token 的情況下,是無法瀏覽 /day26authsample
頁面的,並會在 OnInitializedAsync
後導向 /day26sample
頁面,若有大量頁面需要做判斷,也可以考慮抽成一個共用驗證元件,透過繼承的方式一次修改所有需要驗證的元件。
以上就是我對於 JWT 驗證的處理方式,本來看到官方的範例想跳過此內容的,但又覺得介紹 blazor 不介紹驗證授權相關的技巧說不過去,所以就衍生出了這一篇,希望能幫助到大家。完整程式碼在範本程式碼 - day26。
感謝大家的閱讀,我們明天見。
參考資料
Blazor WebAssembly - JWT Authentication Example & Tutorial